import React,{useState} from 'react'
import { NavBar, Button, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { SwipeCell, Flex, Image, Typography } from 'react-vant';
import styles from './detail.module.css'
import hhh from '../../img/hhh.png'
import image from '../../img/image.png'
import { SubmitBar } from 'react-vant';
import { Popup } from 'antd-mobile'
import axios from 'axios';

function Index() {
    const navigate = useNavigate()
     const [visible5, setVisible5] = useState(false)
    const id = new Date().getTime()
    const title = '支付'
    const price = "132"
    const zf = async() => {
        const res = await axios.get('/api/pay', { params: { title, id, price } })
        console.log(res)
        window.open(res.data.data)
    }
  return (
    <div>
          <NavBar onBack={() => navigate()}>确认订单</NavBar>
          <h3>云南白药牙膏官方旗舰店</h3>
          <SwipeCell
      rightAction={
        <Button style={{ height: '100%' }} square type="danger">
          删除
        </Button>
      }
    >
      <Flex className="demo-product-card" align="stretch">
        <Image  src="https://img.yzcdn.cn/vant/ipad.jpeg" className={styles.tp} />
        <Flex direction="column" justify="between" className="demo-product-card__content">
          <div>
            <Typography.Title level={5}>云南白药牙膏清新口气</Typography.Title>
            <Typography.Text type="secondary">净含量100g 商品颜色分类【五效护口】</Typography.Text>
          </div>
          <Flex justify="between" align="center">
            <Typography.Text strong size="lg">
              ¥79.00
            </Typography.Text>
            <Typography.Text size="sm" type="secondary">
              x2
            </Typography.Text>
          </Flex>
        </Flex>
      </Flex>
          </SwipeCell>
          <br/>
          <br/>
          <img src={hhh} className={styles.hh} alt="" />
          <div className="demo-submit-bar"><SubmitBar price="13200" buttonText="提交订单" onSubmit={() => setVisible5(true)} /></div>;
          
           <Popup
              visible={visible5}
              onMaskClick={() => {
                setVisible5(false)
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '40vh',
              }}
            >
              <img src={image} className={styles.xh} alt="" />
                <Button block color='primary' size='large' onClick={()=>zf()}>
         确认支付
        </Button>
            </Popup>
    </div>
  )
}

export default Index
